<template >
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<el-form :inline="true" :model="form" ref="formData" class="demo-form-inline">
						<el-form-item>
							<el-input v-model="form.name" placeholder="请输入学生姓名" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="searchLogin(form)">查询</el-button>
							<el-button type="primary" @click="getAllLogin">重置</el-button>
						</el-form-item>
			<div class="system-menu-search mb15">
				<el-button size="default" type="success" class="ml10" @click="onOpenAddMenu">
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增学生信息
				</el-button> 
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%" row-key="path"
			:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
				<el-table-column prop="id" label="id" show-overflow-tooltip />
				<el-table-column prop="sno" label="学生学号" show-overflow-tooltip />
				<el-table-column prop="sclass" label="学生班级" show-overflow-tooltip />
				<el-table-column prop="birthdate" label="出生日期" show-overflow-tooltip />
				<el-table-column prop="name" label="学生姓名" show-overflow-tooltip />
				<el-table-column prop="position" label="身份" show-overflow-tooltip />
				<el-table-column label="操作" show-overflow-tooltip>
					<template #default="scope">
						<el-button size="small" text type="primary" plain @click="onOpenEditMenu('edit', scope.row)">修改</el-button>
						<el-button size="small" text type="primary" plain @click="onTabelRowDel(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div style="display: flex; justify-content: flex-start">
				<el-pagination
					background
					layout="prev, pager, next"
					:total="state.tableData.total"
					:current-page="state.tableData.param.pageNum"
					:page-size="state.tableData.param.pageSize"
					@current-change="page"
				/>
			</div>
		</el-form>
		</el-card>
		<MenuDialog ref="menuDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { useLoginApi } from '/@/api/login';

// 引入组件
const MenuDialog = defineAsyncComponent(() => import('/@/views/system/menu/dialog.vue'));
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const formData = ref<FormInstance>();
const form = reactive({
	name: '',
	sno:'',
	birthdate:'',
	sclass:'',
	position:'',
});

const state = reactive({
	tableData: {
		data: [] as RouteRecordRaw[],
		loading: true,
		total: 100,
		param: {
			user: JSON.parse(localStorage.getItem('user') || '{}'),
			pageNum: 1,
			pageSize: 30,
			showPage: true,
			pagetotal: 0,
		},
	},
});

//自定义参数
const data = {
	hid: JSON.parse(localStorage.getItem('hid') || '{}'),
	state: '',
	state1: '',
	show: false,
	loginId: 0,
	name: '',
	pageIndex: 1,
	pageSize: 30,
};

//获取login信息
const getAllLogin = async () => {
	useLoginApi()
		.getLogin(data)
		.then((res) => {
			state.tableData.data = res.data.records;
			state.tableData.total = res.data.total;
			data.show = true;
		});
};

//分页参数设置
function page(value: any) {
	state.tableData.param.pageNum = value;
	data.pageIndex = value;
	getAllLogin();
}

//格式化后端返回来的时间
function getLocalTime(value: any) {
	let time =
		value.uploadtime[0] +
		'-' +
		value.uploadtime[1] +
		'-' +
		value.uploadtime[2] +
		' ' +
		value.uploadtime[3] +
		':' +
		value.uploadtime[4] +
		':' +
		value.uploadtime[5];
	return time;
}

// 获取路由数据，真实请从接口获取
const getTableData = () => {
	state.tableData.loading = true;
	state.tableData.data = routesList.value;
	setTimeout(() => {
		state.tableData.loading = false;
	}, 500);
};

// 打开新增菜单弹窗
const onOpenAddMenu = (type: string) => {
	menuDialogRef.value.openDialog(type);
};

// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: DeptTreeType) => {
	localStorage.setItem('data', JSON.stringify(row));
	menuDialogRef.value.openDialog(type, row);
};

// 搜索学生姓名
const searchLogin = async (form: any) => {
	useLoginApi()
		.searchLogin(form)
		.then((res) => {
			console.log(res);
			state.tableData.data = res.data;
		});
};
// 删除当前行
const onTabelRowDel = async (id: any) => {
	await ElMessageBox.confirm('确定要删除吗？', '删除提醒', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).catch(() => {
		ElMessage.info('删除操作被取消!');
		return new Promise(() => {});
	});
	useLoginApi()
		.deleteLogin(id)
		.then((res) => {
			if (res.code === 1) {
				ElMessage.success('删除成功');
				location.reload();
			} else {
				ElMessage.error('删除菜单失败');
			}
		});
};

// 页面加载时
onMounted(() => {
	getAllLogin(), getTableData();
});
</script>
<style>
.demo-form-inline .el-input {
	--el-input-width: 220px;
}

.demo-form-inline .el-select {
	--el-select-width: 220px;
}
</style>

